<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>

</body>
<script type="module">
    import * as THREE from "three";
    import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
    import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

    const loader = new GLTFLoader();
    const clock = new THREE.Clock();

    //创建场景
    const scene = new THREE.Scene();
    scene.background = new THREE.Color("#c0d1e4")
    // 添加环境光
    // const ambientLight = new THREE.AmbientLight('#ffffff', 5);
    // scene.add(ambientLight);

    const size = 10;
    const divisions = 10;

    const gridHelper = new THREE.GridHelper(size, divisions, '#fc3f80', '#07c160');
    scene.add(gridHelper);

    const dirLight = new THREE.DirectionalLight(0xFFFFFF, 5);
    const helper = new THREE.DirectionalLightHelper(dirLight, 5);
    // dirLight.color.setHSL(.1, 1, .95);
    dirLight.position.set(0, 2, 0);
    // dirLight.position.multiplyScalar(30);
    scene.add(dirLight, helper);

    //创建相机
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    // camera.position.z = 60;
    // camera.position.y = 10;
    // camera.position.x = 10
    // camera.lookAt(0, 0, 0)
    camera.position.set(1,2,-1)
    //创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 添加镜头轨道控制器
    const controls = new OrbitControls(camera, renderer.domElement);
    let mixer,runAction,idleAction,currentAction;
    loader.load('../models/Soldier.glb', gltf => {
        console.log("sss", gltf);
        const model = gltf.scene
        const animations = gltf.animations;

        mixer = new THREE.AnimationMixer(model)
        const runClip = animations.find(item=>item.name == 'Run');
        const idleClip = animations.find(item=>item.name == 'Idle');
        if(runClip && idleClip){
            runAction = mixer.clipAction(runClip);
            idleAction = mixer.clipAction(idleClip);
            idleAction.play();
            currentAction = idleAction;
        }
        model.scale.set(0.8, 0.8, 0.8)

        scene.add(model);
    })

    //渲染场景
    function animate() {
        requestAnimationFrame(animate);
        const delta = clock.getDelta();
        if(mixer){
            mixer.update(delta)
        }
        renderer.render(scene, camera)
    }
    animate()

    window.addEventListener('keydown',(e)=>{
        if(e.code == 'KeyW'){
            if(runAction && currentAction !== runAction){     
                currentAction.fadeOut(0.5);
                runAction.reset().fadeIn(0.5).play();
                currentAction = runAction;
            }
        }
    })

    window.addEventListener('keyup',(e)=>{
        if(idleAction && currentAction !== idleAction){
            if(e.code == 'KeyW'){
                currentAction.fadeOut(0.5);
                idleAction.reset().fadeIn(0.5).play();
                currentAction = idleAction;
            }
        }
    })
</script>

</html>